<template>
  <div class="app-container">
    <el-row type="flex">
      <el-input
        v-model="input"
        style="width: 300px"
        placeholder="请输入搜索的用户"
        class="input-with-select"
        @input="handlerInput"
      >
        <el-button slot="append" icon="el-icon-search"/>
      </el-input>
    </el-row>

    <el-table
      style="margin-top: 10px"
      :data="showList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!--      <el-table-column align="center" label="用户名">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row['name'] }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="手机号" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row['phoneNumber'] }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="昵称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row['nickName'] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="VIP等级" align="center">
        <template slot-scope="scope">
          {{ scope.row['level'] }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="VIP开始时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row['startTime'] | parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="VIP结束时间">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row['endTime']| parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="`/user/detail/${scope.row.id}`">
            <el-button size="small" type="primary">查看</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--    <el-pagination-->
    <!--      :current-page="currentPage"-->
    <!--      :page-sizes="[100, 200, 300, 400]"-->
    <!--      :page-size="100"-->
    <!--      layout="total, sizes, prev, pager, next, jumper"-->
    <!--      :total="400"-->
    <!--    />-->
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getUserList } from '@/api/user'

export default {
  filters: {
    parseTime
  },
  data() {
    return {
      currentPage: 1,
      input: '',
      list: [],
      showList: [],
      userList: []
    }
  },
  watch: {
    input(value) {
      this.showList = this.userList.filter(user => user.nickName.indexOf(value) >= 0)
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const res = await getUserList()
      console.log(res)
      this.userList = this.showList = res.data
    },
    handlerInput() {

    }
  }
}
</script>
